<template>
  <div>
       <ul id="user">
       <li><img src="my/userImg.png" alt=""></li>
       <li>
         <h3>187****5620</h3>
        </li>
        <li> 
          <img src="my/myMeaasge.png" alt="">
       </li>
        <li>
         <img src="my/setup.png" alt="">
         </li>
     </ul>
     <div id="score">
       <div><span>积分</span>
        <h1>1665</h1></div>
       <div><span>优惠券</span>
       <h1>0</h1></div>     
     </div>
      <p id="s"></p>
  </div>
</template>

<script>
export default {

}
</script>

<style scoped>

#user {
  width: 90%;
  height: 0.7rem;
  margin: auto;
  margin-top: 0.2rem;
  position: relative;

}
#user li{
  float: left;
  margin-right: 0.2rem;
}
#user li:first-child img{
width: 0.7rem;
}
#user li:nth-child(2){
  height: 0.7rem;
line-height: 0.7rem;
}
#user li:nth-child(3) img{
width: 0.2rem;
position: absolute;
right: 0.3rem;
}
#user li:nth-child(4) img{
width: 0.2rem;
position: absolute;
right: 0rem;
}
#score{
  width: 90%;
  height: 0.4rem;
  line-height: 0.4rem;
  margin: auto;
  margin-top: 0.2rem;
}
#score div{
  width: 50%;
  float: left;
  text-align:left;
}
#score div:last-child{
  text-align:right;
}
#score div span{
  color: gray;
  margin-right: 0.1rem;
}
#score h1{
  display: inline-block;
}
#s{
  background-color: white;
  width: 100%;
  height: 1rem;
  border-bottom: 1px solid gainsboro;
}
</style>